<template>
  <div id="aside">
    <el-aside class="aside_box">
      <div class="logo" @click="homeUrl">
        <img src="../../assets/images/h5_logo.png" alt="">
        <span>前端工具箱</span>
      </div>
      <el-menu :default-active="activeMenu" :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen"
        @close="handleClose">
        <SubMenu :menuList="menuList"></SubMenu>
      </el-menu>
    </el-aside>
  </div>
</template>
<script setup >
import { computed } from "vue";
import SubMenu from "./SubMenu.vue";
import { data } from "@/router/data";
import { useRouter, useRoute } from "vue-router";
import { HOME_URL } from "@/config/index";
const route = useRoute();
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path));
const router = useRouter();
const Props = defineProps(['menuList']);
const menuList = data;
const homeUrl = () => {
  router.push(HOME_URL);
}
const handleOpen = (key, keyPath) => {
  // console.log('打开')
  //   console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log('关闭')
  //   console.log(key, keyPath)
}
</script>
<style scoped lang="scss">
.aside_box {
  width: 200px;

}


.logo {
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D4D7DE;
  cursor: pointer;

  img {
    width: 28px;
  }

  span {
    font-size: 18px;
    font-weight: bold;
    color: var(--el-logo-text-color);
    margin-left: 5px;
  }
}
</style>